<!--登录-->
<template>
  <div class="login-container">
    <section class="form-container">
      <div class="manage-tip">
        <span class="title">系统登录</span>
        <el-form :model="userLoginFormDTO" status-icon :rules="rules" ref="loginForm" label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="账号" prop="userAccount">
            <el-input v-model="userLoginFormDTO.userAccount" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userPassword">
            <el-input type="password" v-model="userLoginFormDTO.userPwd" autocomplete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="submit-btn" @click="submitForm('loginForm')">登录</el-button>
          </el-form-item>
          <div class="tiparea">
            <p>还没账号？现在
              <router-link to="/register">注册</router-link>
            </p>
          </div>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'login',
  components: {},
  data () {
    return {
      userLoginFormDTO: {
        userAccount: '',
        userPwd: ''
      },
      rules: {
        userAccount: [{
          require: true,
          message: '用户名不能为空',
          trigger: blur()
        },
        {
          min: 2,
          max: 20,
          message: '长度在2-30之间',
          trigger: blur()
        }],
        userPwd: [{
          require: true,
          message: '密码不能为空',
          trigger: blur()
        },
        {
          min: 6,
          max: 30,
          message: '长度在6-30之间',
          trigger: blur()
        }]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/users/login', this.userLoginFormDTO).then(res => {
            let user = res.data.data
            console.log(user)
            if (user) {
              sessionStorage.setItem('user', JSON.stringify(user))
              this.$router.push('/')
            } else {
              this.$message({
                message: '账号或密码错误',
                type: 'fail'
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .login-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: url("../assets/bg.jpeg") no-repeat center center;
    background-size: 100%;
  }

  .form-container {
    border-radius: 5px;
    height: 400px;
    width: 380px;
    padding: 20px 70px 20px 20px;
    top: 20%;
    left: 36%;
    position: absolute;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    text-align: center;
  }

  .form-container .manage-tip .title {
    font-family: 'Microsoft YaHei';
    font-weight: bold;
    font-size: 30px;
    color: #fff;
  }

  .submit-btn{
    width: 100%;
  }

  .tiparea {
    text-align: right;
    font-size: 12px;
    color: #333;
    p a {
      color: #409eff;
    }
  }

</style>
